<template>
    <div>
        <div class="timeColor">{{ newDate | dateFormat }}</div>
        <div class="dateColor">{{ newDate | dateFormat('date') }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newDate: new Date(),
            timer: null
        }
    },
    mounted() {
        this.timer = setInterval(() => {
            this.newDate = new Date();
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    filters: {
        dateFormat(date, type) {
            let year = date.getFullYear();
            let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            let H = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            let S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            let W = date.getDay();
            let weekArr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

            if (type === 'date') {
                return `${year}年${M}月${D}日`;
            } else {
                return `${H}:${m}:${S} ${weekArr[W]}`;
            }
        }
    }
}
</script>

<style scoped lang="less">

.timeColor {
    color: white;
    font-size: 30px;
}

.dateColor {
    color: white;
    font-size: 20px;
}
</style>


